<template>
	<div class="loginregister_container" v-loading="loading" style="--primary: #4361ee">
		<img class="bg" :src="loginBackground" v-if="!!loginBackground" />
		<div class="loginregister_body">
			<router-view></router-view>
		</div>
		<div class="foot">{{ siteInfo.field4 }}</div>
	</div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';
export default {
	data() {
		return {
			loading: false,
			logoUrl: '',
			loginBackground: ''
		};
	},
	computed: {
		...mapGetters(['siteInfo'])
	},
	mounted() {
		this.initializeLoginPage();
	},
	methods: {
		...mapActions(['getFileUrl']),
		//初始化登录页面
		async initializeLoginPage() {
			this.loading = true;
			if (!!this.siteInfo.webLogo) {
				this.logoUrl = await this.getFileUrl(this.siteInfo.webLogo);
			}
			/* if (!!this.siteInfo.field8) {
				this.logoUrl = await this.getFileUrl(this.siteInfo.field8);
			} */
			if (!!this.siteInfo.field1) {
				this.loginBackground = await this.getFileUrl(this.siteInfo.field1);
			}
			this.loading = false;
		}
	}
};
</script>

<style lang="scss" scoped>
.loginregister_container {
	position: relative;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	img.bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
		object-fit: cover;
		filter: blur(5px);
		transform: scale(1.1);
	}
	.foot {
		position: absolute;
		bottom: 16px;
		left: 0;
		width: 100%;
		text-align: center;
		color: #ebeef5;
		z-index: 5;
	}
}

.loginregister_body {
	position: relative;
	z-index: 9;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: auto;
	.el-divider {
		margin-top: 10px;
	}
	.bottom {
		font-size: 16px;
	}
}

.loginregister_foot {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	text-align: center;
	color: #ebeef5;
	z-index: 5;
	padding: 16px 0;
}
</style>
